<!DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="theme-color" content="#FFFFFF">
        <link rel="stylesheet" type="text/css" href="./public_html/css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="./public_html/css/login.css" />
        <link rel="stylesheet" type="text/css" href="./public_html/css/sweet-alert.css" />
        <title>SONIC :: Login</title>
        <!--[if !IE]> -->
        <script type="text/javascript" src="./public_html/js/jquery.js"></script>
        <script type="text/javascript" src="./public_html/js/simpleslider.min.js"></script>
        <script type="text/javascript" src="./public_html/js/backstretch.js"></script>
        <script type="text/javascript" src="./public_html/js/sweet-alert.min.js"></script>
        <!-- <![endif]-->
        <!-- [if IE]> 
        <script type="text/javascript" src="./public_html/js/jquery-1.9.1.js"></script>
        <![endif]-->
        <script type="text/javascript" src="./public_html/js/login.js"></script>
    </head>
    <body>
        <div id="login-page">
            <div class="col esq">
                <div class='slider'>
                    <div class='slide' id="first">
                        <div class='slidecontent'>
                            <span class="headersur">Com o <strong><u>SONIC</u></strong> a comunicação é</span>
                            <h1>SIMPLES E FÁCIL</h1>
                            <div class="headersur">Tão simples quanto ir para o
                                <div class="button nxt-sld">próximo slide <i class="icon-arrow-right"></i></div></div>
                        </div>
                    </div>
                    <div class='slide' id="sec">
                        <div class='slidecontent'>
                            <h1>ONLINE</h1>
                            <div class="headersur">
                                <p>No PC, no tablet ou no celular... <br /> 
                                    Resolva de onde você estiver<br /> Sem filas e a qualquer horário.</p>

                                <div class="button nxt-sld">Gostou? Ainda tem mais <i class="icon-arrow-right"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class='slide' id="thirth">
                        <div class='slidecontent'>
                            <span class="headersur">Mantenha-se</span>
                            <h1>CONECTADO</h1>
                            <div class="headersur">
                                <p>Tire suas dúvidas, resolva conflitos, comunique-se!</p>
                                <div class="button nxt-sld">E depois? <i class="icon-arrow-right"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class='slide' id="fourth">
                        <div class='slidecontent'>
                            <span class="headersur">Não perca tempo!</span>
                            <h1>Curta seu dia</h1>
                            <div class="headersur">
                                <p>Aproveite para ler um livro.</p>
                                <div class="button">
                                    <a href="http://www.saraiva.com.br/a-revolucao-dos-bichos-1574783.html" target="_BLANK">
                                        <i class="icon-book"></i> A revolução dos bichos
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col dir">
                <div class="logo">
                    <img src="./public_html/imagens/logo_m.png" />
                </div>
                <div class="form-login-layer">
                    <div class="rc-senha-layer"></div>
                    <div class="login-layer">
                        <p class="hint">Use suas credenciais para acessar o SONIC</p>
                        <form id="form-login" method="post">
                            <div class="form-group form-group-default">
                                <label>Login</label>
                                <div class="controls">
                                    <input id="login" type="text" name="login" placeholder="Sua matrícula" class="form-control" required="" value="<?= $lname ?>" />
                                </div>
                            </div>
                            <div class="form-group form-group-default">
                                <label>Senha</label>
                                <div class="controls">
                                    <input id="senha" type="password" class="form-control" name="senha" placeholder="Sua senha" required="">
                                </div>
                            </div>
                            <label class="error"><?= validation_errors() ?></label>
                            <div class="row">
                                <div class="col-md-6 no-padding">
                                    <div class="checkbox ">
                                        <input type="checkbox" value="1" id="remember_me">
                                        <label for="remember_me">Lembrar de mim</label>
                                    </div>
                                </div>
                                <div class="col-md-6 text-right">
                                    <a href="#recuperarSenha" id="rc_senha" class="text-info small">Recuperar senha</a>
                                </div>
                            </div>
                            <button id="send" class="btn btn-primary btn-cons m-t-10">Entrar</button>
                        </form>
                    </div>
                </div>
                <div class="footer"></div>
            </div>
        </div>
    </body>
</html>